<template>
  <div class="shareContainer" ref="shareContainer">
    <div class="shareheader">
      <div class="searchContainer">
        <el-form ref="form" :model="searchData" :inline="true">
          <el-form-item label="预警标题" size="mini">
            <el-input v-model="searchData.contentTitle"></el-input>
          </el-form-item>
          <el-form-item label="预警类型" size="mini">
            <el-select v-model="searchData.warningType" style="width: 120px">
              <el-option
                v-for="type in warningType"
                :key="type.item_code"
                :label="type.item_name"
                :value="type.item_code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="启用状态" size="mini">
            <el-select v-model="searchData.warningStatus" style="width: 120px">
              <el-option
                v-for="status in useStatus"
                :key="status.item_code"
                :label="status.item_name"
                :value="status.item_code"
              />
            </el-select>
          </el-form-item>
          <el-form-item size="mini">
            <el-button
              type="primary"
              data-tracker="P34-1"
              icon="el-icon-search"
              @click="searchContentList"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh-left" @click="resultClickFn"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="sharecontent">
      <!-- 头部内容 -->
      <div class="sharecontent_header">
        <div class="sharecontent_header_right">
          <el-button
            v-permission="'earlywarning_template_create'"
            type="primary"
            plain
            @click="addTimeVisible"
            data-tracker="P34-2"
            style="margin: 0px 10px 10px 0px"
            >超时预警</el-button
          >
          <el-button
            v-permission="'earlywarning_template_create'"
            type="primary"
            plain
            @click="addTempVisible"
            data-tracker="P34-3"
            style="margin: 0px 10px 10px 0px"
            >超温预警</el-button
          >
          <el-button
            v-permission="'earlywarning_template_create'"
            type="primary"
            plain
            @click="addAutVisible"
            data-tracker="P34-3"
            style="margin: 0px 10px 10px 0px"
            >离线预警</el-button
          >
          <el-button
            v-permission="'earlywarning_template_delete'"
            type="primary"
            plain
            @click="deleteContents"
            data-tracker="P34-4"
            style="margin: 0px 10px 10px 0px"
            >删除</el-button
          >
        </div>
        <div class="sharecontent_header_left">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 表单内容 -->
      <div class="sharecontent_content">
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          :max-height="maxheight"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column fixed prop="name" label="预警标题">
          </el-table-column>
          <el-table-column prop="template_type" label="预警类型">
            <template slot-scope="scope">{{
              scope.row.template_type | afterTime
            }}</template>
          </el-table-column>
          <el-table-column prop="is_enable" label="是否启用" width="200">
            <template slot-scope="scope">{{
              scope.row.is_enable | enableType
            }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                v-permission="'earlywarning_template_update'"
                type="text"
                size="small"
                data-tracker="P34-6"
                @click="handleModify(scope.row)"
                >编辑</el-button
              >
              <el-button
                v-permission="'earlywarning_template_detail'"
                @click="handleClick(scope.row)"
                data-tracker="P34-5"
                type="text"
                size="small"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 弹框内容 -->
      <div class="addWarehouse">
        <el-dialog
          :title="ruleForm.contentType"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          width="63%"
          :before-close="handleClose"
        >
          <div class="form">
            <el-form
              :inline="true"
              class="demo-form-inline"
              label-width="120px"
              label-position="left"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
            >
              <el-form-item label="预警标题" prop="warningTitle">
                <el-input
                  v-model="ruleForm.warningTitle"
                  :disabled="onlyRead"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="预警内容"
                prop="warningContent"
                size="large"
                style="display: block; height: 100px; width: 600px"
              >
                <el-input
                  v-model="ruleForm.warningContent"
                  type="textarea"
                  :disabled="onlyRead"
                  style="width: 400px"
                />
              </el-form-item>

              <el-form-item label="是否启用" prop="isUse">
                <el-radio
                  v-model="ruleForm.isUse"
                  label="0"
                  :disabled="onlyRead"
                  >启用</el-radio
                >
                <el-radio
                  v-model="ruleForm.isUse"
                  label="1"
                  :disabled="onlyRead"
                  >禁用</el-radio
                >
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button data-tracker="P34-9" @click="dialogVisible = false"
              >取 消</el-button
            >
            <el-button
              data-tracker="P34-8"
              type="primary"
              @click="confirmCreate"
              v-show="!onlyRead"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  AddOverContent,
  OverContentList,
  deleteOverContent,
  AmendOverContent,
  reqDictionaryOptions,
  TemplateDetail,
} from "@/api/earlywarning";
export default {
  data() {
    return {
      searchData: {
        warningType: "", //报警类型
        contentTitle: "", //标题
        warningStatus: "", //启用状态
      },
      ruleForm: {
        contentType: "", //超时还是超温
        warningTitle: "", //报警标题
        warningContent: ``, //报警内容
        isUse: "1", //是否启用
      },
      rules: {
        warningTitle: [
          { required: true, message: "请输入预警标题", trigger: "blur" },
        ],
        warningContent: [
          { required: true, message: "请输入预警内容", trigger: "blur" },
        ],
      },
      tableData: [],
      tableData_copy: [],
      dialogVisible: false, //判断弹框显示隐藏
      pageSize: 20, //一页几条
      pageNum: 1, //第几页
      totalNum: 100, //列表总数
      onlyRead: false, //详情只读
      isModify: false, //是否是修改
      multipleSelection: [], //多选项
      useStatus: [
        { item_name: "启用", item_code: "0" },
        { item_name: "禁用", item_code: "1" },
      ], //启用状态
      warningType: [
        { item_name: "超时预警", item_code: "1" },
        { item_name: "超温预警", item_code: "2" },
        { item_name: "离线预警", item_code: "3" },
      ], //预警类型
      cordId: "",
      dataObj: {},
      orderIdNums: [],
      maxheight: "auto",
    };
  },
  components: {},
  filters: {
    afterTime(value) {
      // console.log(value, "fksadfp");
      if (value == 1) {
        return "超时预警";
      } else if (value == 2) {
        return "超温预警";
      } else if (value == 3) {
        return "离线预警";
      }
      // return "导出错误数据";
    },
    enableType(value) {
      if (value == 0) {
        return "启用";
      } else if (value == 1) {
        return "禁用";
      }
    },
  },
  mounted() {
    this.displayLists();
    this.getOptionsList();
  },
  methods: {
    //重置按钮
    resultClickFn() {
      this.searchData.warningType = "";
      this.searchData.contentTitle = "";
      this.searchData.warningStatus = "";
      this.displayLists();
    },
    async displayLists() {
      // console.log(this.searchData.warningStatus, "===============");
      let result = await OverContentList({
        page: this.pageNum,
        page_size: this.pageSize,
        name: this.searchData.contentTitle,
        template_type: this.searchData.warningType,
        is_enable: this.searchData.warningStatus,
      });
      if (result.code === 10000 && result.data.list !== null) {
        // result.data.list.forEach((item) => {
        //   item.template_type =
        //     item.template_type === "1" ? "超时预警" : "超温预警";
        //   item.is_enable = item.is_enable === "1" ? "禁用" : "启用";
        // });
        this.tableData = result.data.list;
        // this.tableData_copy = JSON.parse(JSON.stringify(this.tableData));
        if (this.tableData.length > 6) {
          //两排操作栏
          this.maxheight = document.documentElement.clientHeight - 265;
        } else {
          this.maxheight = "auto";
        }
        this.pageNum = result.data.pagination.current_page;
        this.pageSize = result.data.pagination.per_page_count;
        this.totalNum = result.data.pagination.total;
      } else {
        this.tableData = [];
        this.pageNum = 1;
        this.pageSize = 20;
        this.totalNum = 0;
      }
    },
    async getOptionsList() {
      // let result1 = await reqDictionaryOptions({
      //   dictionary_code: "is_enable",
      // });
      // this.useStatus = result1.data.list;
      let result2 = await reqDictionaryOptions({
        dictionary_code: "earlywarning",
      });

      // this.warningType = result2.data.list;
    },
    searchContentList() {
      this.pageNum = 1;
      this.pageSize = 20;
      this.displayLists();
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.displayLists();
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.displayLists();
    },
    handleClose() {
      //关闭弹框的
      this.dialogVisible = false;
    },
    addTimeVisible() {
      //添加超时报警
      Object.assign(this.$data.ruleForm, this.$options.data().ruleForm);
      this.dialogVisible = true;
      this.isModify = false;
      this.onlyRead = false;
      this.ruleForm.contentType = "超时预警";
      this.ruleForm.warningContent =
        "【运输批次号】运输批次到达超时，超时xx分钟。该运输批次由【出发网点】发往【目的网点】。请尽快处理。";
    },
    addTempVisible() {
      //添加超温报警
      Object.assign(this.$data.ruleForm, this.$options.data().ruleForm);
      this.dialogVisible = true;
      this.isModify = false;
      this.onlyRead = false;
      this.ruleForm.contentType = "超温预警";
      this.ruleForm.warningContent =
        "运单号【运单号】超温预警，当前温度为【当前温度】。该运单承运产品类型为【承运产品类型】。由【出发网点】发往【目的网点】。请尽快处理。";
    },
    addAutVisible() {
      Object.assign(this.$data.ruleForm, this.$options.data().ruleForm);
      this.dialogVisible = true;
      this.isModify = false;
      this.onlyRead = false;
      this.ruleForm.contentType = "离线预警";
      // console.log(
      //   this.ruleForm.contentType,
      //   "================================"
      // );
      this.ruleForm.warningContent = "温度计【编号】已断电，请及时处理！。";
    },
    async confirmCreate() {
      // console.log(this.ruleForm);
      //确认增加
      let { ruleForm } = this;
      if (this.ruleForm.warningTitle == "") {
        this.$message({
          type: "error",
          message: "请填写预警标题，必填项",
        });
      } else if (this.ruleForm.warningContent == "") {
        this.$message({
          type: "error",
          message: "请填写预警内容，必填项",
        });
      } else {
        if (this.isModify) {
          var contentListType = "";
          if (ruleForm.contentType == "超温预警") {
            contentListType = 2;
          } else if (ruleForm.contentType == "超时预警") {
            contentListType = 1;
          } else if (ruleForm.contentType == "离线预警") {
            contentListType = 3;
          }
          await AmendOverContent({
            id: this.cordId,
            name: ruleForm.warningTitle,
            content: ruleForm.warningContent,
            template_type: contentListType + "",
            is_enable: ruleForm.isUse,
          });
        } else {
          var contentListType = "";
          if (ruleForm.contentType == "超温预警") {
            contentListType = 2;
          } else if (ruleForm.contentType == "超时预警") {
            contentListType = 1;
          } else if (ruleForm.contentType == "离线预警") {
            contentListType = 3;
          }

          await AddOverContent({
            name: ruleForm.warningTitle,
            content: ruleForm.warningContent,
            template_type: contentListType + "",
            is_enable: ruleForm.isUse,
          });
        }
        this.dialogVisible = false;
        this.$message({
          type: "success",
          message: `${this.onlyRead === true ? "添加" : "修改"}成功`,
        });
        this.displayLists();
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 0) {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          this.orderIdNums = this.multipleSelection.map((item) =>
            Number(item.id)
          );
        }
      } else {
        this.orderIdNums = [];
      }
    },
    async deleteContents() {
      let data = {
        ids: this.orderIdNums,
      };
      if (this.orderIdNums.length > 0) {
        await deleteOverContent(data);
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.displayLists();
      } else {
        this.$message({
          type: "error",
          message: "请至少选择一条数据删除",
        });
      }
    },
    handleClick(val) {
      //查看详情
      this.dialogVisible = true;
      this.onlyRead = true;

      var param = {
        id: val.id,
      };
      TemplateDetail(param).then((res) => {
        if (res.code == 10000) {
          // console.log(res.data.is_enable, "====================");
          if (res.data.template_type == 3) {
            this.ruleForm.contentType = "离线预警";
          } else if (res.data.template_type == 2) {
            this.ruleForm.contentType = "超时预警";
          } else if (res.data.template_type == 1) {
            this.ruleForm.contentType = "超温预警";
          }
          this.ruleForm.warningTitle = res.data.name;
          this.ruleForm.warningContent = res.data.content;
          this.ruleForm.isUse = res.data.is_enable;
        }
      });
      // console.log(val.id, "valfjsalkj");
      // this.ruleForm.warningTitle = val.name;
      // this.ruleForm.contentType = val.template_type;
      // this.ruleForm.warningContent = val.content;
      // this.ruleForm.isUse = val.is_enable;
    },
    handleModify(val) {
      this.handleClick(val);
      // this.dataObj = val
      this.cordId = val.id;
      // this.dialogVisible = true;
      this.onlyRead = false;
      this.isModify = true;
      // this.ruleForm.warningTitle = val.name;
      // this.ruleForm.contentType = val.template_type;
      // this.ruleForm.warningContent = val.content;
      // this.ruleForm.isUse = val.is_enable;
    },
  },
};
</script>

<style lang="less" scoped>
.shareContainer {
  padding: 10px 15px;
  background-color: #fff;

  .shareheader {
    background: white;

    .searchContainer {
      // padding: 0 20px;
    }
  }

  // 内容
  .sharecontent {
    // height: 400px;
    // width: 99%;
    // margin: 0 auto;
    // padding: 0px 10px;
    background: white;

    // 头部内容
    .sharecontent_header {
      .sharecontent_header_right {
        display: inline-block;
      }

      .sharecontent_header_left {
        float: right;
        padding: 0px 10px 0px 0px;
      }
    }

    // 表单内容
    .sharecontent_content {
      // margin-top: 12px;
    }

    .addWarehouse {
      .form {
        .el-form {
          .el-form-item {
            width: 350px;

            /deep/ .el-textarea__inner {
              height: 100px;
            }
          }
        }
      }
    }
  }
}
</style>